import React, {Component} from 'react';
import Chakan from '../../components/Popover/xiangqing/chakan';
import Tianjia from '../../components/Popover/xiangqing/tianjia';
import Xiugai from '../../components/Popover/xiangqing/xiugai';
import Delete from '../../gonggong/delete';
import Sousuo from './sousuo';
import {Layout, Breadcrumb, Menu, Dropdown, Table, Space} from 'antd';
import {DownOutlined} from '@ant-design/icons';
import axios from 'axios';
import {nanoid} from 'nanoid';
const {Header, Content, Footer} = Layout;
class Menus extends React.Component {
  state = {
    visible: false,
  };
  handleMenuClick = e => {
    if (e.key === '3') {
      this.setState ({visible: false});
    }
  };
  render () {
    return (
      <Menu onClick={this.handleMenuClick}>
        {(() => {
          if (this.props.text.length == 0) {
            return (
              <Menu.Item key={nanoid ()}>
                <p>暂无图片</p>
              </Menu.Item>
            );
          }
        }) ()}
        {this.props.text.map ((i, index, arr) => {
          return (
            <Menu.Item key={nanoid ()}>
              {/* <a style={{ color: "#40a9ff" }} >{i}
                               23</a> */}
              <Chakan value={i} />
            </Menu.Item>
          );
        })}
      </Menu>
    );
  }
}
class index extends Component {
  state = {
    data: [],
    date: null,
    display: 'none',
    index: -1,
    req: null,
    canshu: {
      url: 'http://localhost:3001/api/goodsdelete',
      gengxin: this.gengxin,
      title: '删除图片',
      tixing: '您将要删除这张轮播图，确定吗？',
    },
  };
  sousuo = req => {
    if (req.data.result) {
    }
    this.setState ({req: req});
    let data = [];
    req.data.result.map ((i, index) => {
      data[index] = {
        key: nanoid (),
        id: i.id,
        title: i.title,
        price: i.price,
        type_one: i.type_one,
        type_two: i.type_two,
        url: [],
      };
    });
    req.data.url.map ((i, index) => {
      data.map ((k, kindex, arr) => {
        if (i.goodsid == k.id) {
          arr[kindex].url.push (i.url);
        }
      });
    });
    console.log ('====================================');
    console.log (data);
    console.log ('====================================');
    if (data.length == 0) {
      data = [{key: nanoid ()}];
      this.setState ({
        data,
        display: 'none',
      });
    } else {
      this.setState ({
        data,
        display: 'block',
      });
    }
    const d = new Date ();
    const nian = d.getFullYear ();
    const yue = d.getMonth () + 1;
    const ri = d.getDate ();
    const shi = d.getHours ();
    const fen = d.getMinutes ();
    const date = nian + '年' + yue + '月' + ri + '日' + shi + '时' + fen + '分';
    this.setState ({
      date,
    });
  };
  gengxin = () => {
    console.log ('触发');
    let k = [];
    this.state.req.data.result.map (i => {
      k.push (i.id);
    });
    axios
      .get ('http://localhost:3001/api/twosousuo', {
        params: {
          id: k,
          token: localStorage.getItem ('token'),
        },
      })
      .then ((req, res) => {
        console.log (req);
        this.sousuo (req);
      });
  };
  componentDidMount = () => {};
  render () {
    const columns = [
      {
        title: '商品id',
        dataIndex: 'id',
        key: nanoid (),
        ellipsis: true,
        width: '100px',
      },
      {
        title: '商品名称',
        dataIndex: 'title',
        key: nanoid (),
        ellipsis: true,
        width: '280px',
      },
      {
        title: '价格',
        dataIndex: 'price',
        key: nanoid (),
        ellipsis: true,
        width: '100px',
      },
      ,
      {
        title: '一级分类',
        dataIndex: 'type_one',
        key: nanoid (),
        ellipsis: true,
        width: '100px',
      },
      ,
      {
        title: '二级分类',
        dataIndex: 'type_two',
        key: nanoid (),
        ellipsis: true,
        width: '100px',
      },
      {
        title: '商品图片',
        dataIndex: 'url',
        key: nanoid (),
        width: '280px',
        ellipsis: true,
        render: text => (
          <Dropdown
            style={{zIndex: this.state.index}}
            overlay={<Menus text={text} />}
            trigger={['click']}
          >
            <a
              className="ant-dropdown-link"
              style={{display: this.state.data[0].id ? 'block' : 'none'}}
              onClick={e => e.preventDefault ()}
            >
              点击查看 <DownOutlined />
            </a>
          </Dropdown>
        ),
      },
      {
        title: '操作',
        key: nanoid (),
        render: (text, record) => {
          const shuju = text;
          const url = {id: text.id, img: text.url};

          return (
            <div style={{display: this.state.display}}>
            <Space size="middle">
                <Tianjia gengxin={this.gengxin} name="添加" />
                <Xiugai shuju={shuju} gengxin={this.gengxin} name="修改" />
                <Delete
                  canshu={this.state.canshu}
                  gengxin={this.gengxin}
                  url={url}
                  name="删除"
                />
                {/* display={this.state.display} */}
            </Space>
            </div>

          );
        },
      },
    ];
    const {data, date} = this.state;
    // console.log(data);
    return (
      <Layout className="site-layout">
        <Header className="site-layout-background" style={{padding: 0}} />
        <Content style={{margin: '0 16px'}}>
          <Breadcrumb style={{margin: '16px 0'}}>
            <Breadcrumb.Item>home</Breadcrumb.Item>
            <Breadcrumb.Item>商品搜索</Breadcrumb.Item>
          </Breadcrumb>
          <div
            className="site-layout-background"
            style={{padding: 24, minHeight: 360}}
          >
            <Sousuo sousuo={this.sousuo} />
            <Table
              style={{marginTop: '22px'}}
              columns={columns}
              dataSource={data}
            />
          </div>
        </Content>
        <Footer style={{textAlign: 'center'}}>数据更新时间：{date}</Footer>
      </Layout>
    );
  }
}

export default index;
